<template>
    <div v-for="item, index in  modelArr" class="modal fade show" id="exampleModal" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" ref="div">
            <div class="modal-content">
                <div v-if="!item.custom">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ item.titel }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            @click="closeMessage(index, item, 'onCancel')"></button>
                    </div>
                    <div class="modal-body">
                        {{ item.context ? item.context : '' }}
                    </div>
                </div>
                <div v-else>
                    {{ item.custom }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn  btn-secondary" v-if="!item.hiddenCancel"
                        @click="closeMessage(index, item, 'onCancel')">{{
                                item.cancelText ?
                                    item.cancelText
                                    : '取消'
                        }}</button>
                    <button type="button" class="btn btn-primary" @click="closeMessage(index, item, 'onOk')"
                        data-bs-dismiss="modal">{{
                                item.okText ? item.okText : '确定'
                        }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, UnwrapNestedRefs } from 'vue'
import { optionsArr, Options } from './index'
export default defineComponent({
    name: 'Model',
    props: {
        modelArr: {
            type: Object as PropType<UnwrapNestedRefs<optionsArr>>,
            required: true
        }
    },
    setup({ modelArr }) {
        const closeMessage = (index: number, options: Options, isOk: 'onOk' | 'onCancel') => {
            if (isOk === 'onOk' && options.onOk && !options.onOk()) return
            if (isOk === 'onCancel' && options.onCancel && !options.onCancel()) return
            modelArr.splice(index, 1)
        }
        return { modelArr, closeMessage }
    }
})
</script>
<style scoped lang="less">
.show {
    opacity: 1;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
}
</style>